<template>
    <div class="page-wrapper">
        <div class="header">
            <div>
                <img src="@/assets/merchant/title.png" alt="" />
                <text>机具统计</text>
            </div>
        </div>
        <div class="card">
            <div class="top">
                <div class="label">{{ posstatistics.sumCount }} 台</div>
                <div class="value">团队总机具数</div>
            </div>
            <div class="bottom">
                <div class="left">
                    <div class="label">{{ posstatistics.dqCount }}台</div>
                    <div class="value">电签</div>
                </div>
                <div class="left">
                    <div class="label">{{ posstatistics.ctCount }}台</div>
                    <div class="value">大POS</div>
                </div>
                <!-- <div class="left">
                    <div class="label">0人</div>
                    <div class="value">码牌</div>
                </div> -->
            </div>
        </div>
        <div class="tabs">
            <van-tabs v-model:active="active" background="#F4F5F7" color="#66d6ff" @click-tab="onClickTab">
                <van-tab title="电签" name="DQPOS" />
                <van-tab title="大POS" name="CTPOS" />
                <!-- <van-tab title="码牌" name="a" /> -->
            </van-tabs>
            <div class="card-t">
                <div class="top">
                    <div class="left">
                        团
                        <br />
                        队
                    </div>
                    <div class="right">
                        <div class="le">
                            <div class="label">{{ teamData.unBindCount }}台</div>
                            <div class="value">库存数</div>
                        </div>

                        <div class="le">
                            <div class="label">{{ belowData.effectiveCount }}台</div>
                            <div class="value">已有效</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ teamData.activateCount }}台</div>
                            <div class="value">已唤醒</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ teamData.qualifyCount }}台</div>
                            <div class="value">已达标</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ teamData.unActivateCount }}台</div>
                            <div class="value">待唤醒</div>
                        </div>
                    </div>
                </div>
                <div class="top">
                    <div class="left" style="background: #ff5d5d">
                        自
                        <br />
                        营
                    </div>
                    <div class="right">
                        <div class="le">
                            <div class="label">{{ directData.unBindCount }}台</div>
                            <div class="value">库存数</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ belowData.effectiveCount }}台</div>
                            <div class="value">已有效</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ directData.activateCount }}台</div>
                            <div class="value">已唤醒</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ teamData.qualifyCount }}台</div>
                            <div class="value">已达标</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ directData.unActivateCount }}台</div>
                            <div class="value">待唤醒</div>
                        </div>
                    </div>
                </div>
                <div class="top">
                    <div class="left" style="background: #fd9c2d">
                        下
                        <br />
                        级
                        <br />
                        团
                        <br />
                        队
                    </div>
                    <div class="right">
                        <div class="le">
                            <div class="label">{{ belowData.unBindCount }}台</div>
                            <div class="value">库存数</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ belowData.effectiveCount }}台</div>
                            <div class="value">已有效</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ belowData.activateCount }}台</div>
                            <div class="value">已唤醒</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ teamData.qualifyCount }}台</div>
                            <div class="value">已达标</div>
                        </div>
                        <div class="le">
                            <div class="label">{{ belowData.unActivateCount }}台</div>
                            <div class="value">待唤醒</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-z">
                <div class="header">
                    <div class="titleLeft">
                        <img src="@/assets/merchant/title.png" alt="" />
                        <text>团队队机具唤醒统计(台)</text>
                    </div>
                    <!-- <div class="checkDetail">

                    </div> -->
                </div>
                <div style="margin: 10px 0px">
                    <van-tabs v-model:active="statisticInterval" type="card" @click-tab="onTabDay">
                        <van-tab title="近十天" name="day"></van-tab>
                        <van-tab title="近半年" name="month"></van-tab>
                    </van-tabs>
                </div>
                <div id="Trading"></div>
            </div>
            <div class="card-z">
                <div>
                    <div class="header">
                        <div class="titleLeft">
                            <img src="@/assets/merchant/title.png" alt="" />
                            <text>团队交易唤醒趋势图</text>
                        </div>
                        <div class="checkDetail" @click="checkTrade">
                            查看明细
                            <img class="checkMore" src="@/assets/merchant/toNext2.png" alt="" />
                        </div>
                    </div>
                    <div
                        class="selDate"
                        style="display: flex; align-items: center; justify-content: space-between; margin: 20px 0; font-size: 12px"
                    >
                        <div></div>
                        <div class="right" @click="showCalendar = true">
                            {{ currentTime.split('至')[0] }}-{{ currentTime.split('至')[1] }}
                            <img class="selTime" src="@/assets/merchant/toNext3.png" alt="" />
                        </div>
                    </div>
                </div>

                <div id="Trading2"></div>
            </div>
            <div class="card-z card-f">
                <div class="header">
                    <div class="titleLeft">
                        <img src="@/assets/merchant/title.png" alt="" />
                        <text>团队机具统计</text>
                    </div>
                    <div class="checkDetail" @click="checkPos">
                        查看明细
                        <img class="checkMore" src="@/assets/merchant/toNext2.png" alt="" />
                    </div>
                </div>

                <div class="center">统计时间到{{ nowTime }}</div>
                <div class="footer">
                    <div class="top">
                        <div class="tt">合伙人</div>
                        <div class="tt">总机具</div>
                        <div class="tt">库存</div>
                        <div class="tt">已唤醒</div>
                        <div class="tt">待唤醒</div>
                    </div>
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadMore">
                        <div class="top b" v-for="(item, index) in list" :key="index">
                            <div class="tt">{{ item.name }}</div>
                            <div class="tt">{{ item.sumCount }}</div>
                            <div class="tt">{{ item.unBindCount }}</div>
                            <div class="tt">{{ item.activateCount }}</div>
                            <div class="tt">{{ item.unActivateCount }}</div>
                        </div>
                    </van-list>
                </div>
            </div>
        </div>
        <!-- 选择日期 -->
        <van-calendar
            :min-date="minDate"
            :max-date="maxDate"
            :allow-same-day="true"
            :default-date="defaultDay"
            v-model:show="showCalendar"
            type="range"
            @confirm="onConfirm"
        />
    </div>
</template>

<script setup lang="ts">
import { parseTime, getDayPro } from '@/utils/utils'
import {
    posTypeCountStatistic,
    posTypeStatusCountStatistic,
    posActivateCountStatistic,
    teamPosActivateTrendStatistic,
    teamAgentPosStatistic
} from '@/api/pos'
import { nextTick } from 'vue'
import * as echarts from 'echarts'
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const nowTime = ref(parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'))
const showCalendar = ref(false)
const currentTime = ref('')
const defaultDay = ref([]) //默认日期
// 日历设置选择范围
const minDate = ref(new Date(new Date().getFullYear() - 1, new Date().getMonth(), new Date().getDate()))
const maxDate = ref(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()))
const router = useRouter()
const active = ref('DQPOS')
const currentPage = ref(1)
const statisticInterval = ref('day')
const posstatistics = ref({})
const teamData = ref({}) // 团队数据
const directData = ref({}) // 自营数据
const belowData = ref({}) // 下级团队数据
getDayPro('本月').then(res => {
    currentTime.value = res
    defaultDay.value = [new Date(res.split('至')[0]), new Date(res.split('至')[1])]
    getteamPosActivateTrendStatistic()
})
const getTrading = (date, data) => {
    // 基于准备好的dom，初始化echarts实例
    document.getElementById('Trading').setAttribute('_echarts_instance_', '')
    var chartDom = document.getElementById('Trading')
    var myChart = echarts.init(chartDom)
    var option
    option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: date,
            axisLabel: {
                interval: 1, //   坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推
                rotate: 40 // 标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度
            }
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            top: 20,
            bottom: 60,
            left: 50,
            right: 20
        },
        series: [
            {
                color: '#66d6ff',
                data: data,
                type: 'bar'
            }
        ]
    }

    option && myChart.setOption(option)
}

const getTrading2 = (date, data1, data2, data3) => {
    // 基于准备好的dom，初始化echarts实例
    document.getElementById('Trading2').setAttribute('_echarts_instance_', '')
    var chartDom = document.getElementById('Trading2')
    var myChart = echarts.init(chartDom)
    var option
    option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: date,
            axisLabel: {
                interval: 1, //   坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推
                rotate: 40 // 标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度
            }
        },
        grid: {
            top: 20,
            bottom: 60,
            left: 50,
            right: 20
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '团队',
                data: data1,
                type: 'line',
                smooth: true
            },
            {
                name: '下级团队',
                data: data2,
                type: 'line',
                smooth: true
            },
            {
                name: '自营',
                data: data3,
                type: 'line',
                smooth: true
            }
        ]
    }

    option && myChart.setOption(option)
}
const checkTrade = () => {
    router.push({
        path: '/posActDetail',
        query: {
            type: active.value
        }
    })
}
const checkPos = () => {
    router.push({
        path: '/posActstatistics',
        query: {
            type: active.value
        }
    })
}
const getteamAgentPosStatistic = () => {
    teamAgentPosStatistic({
        type: active.value,
        currentPage: currentPage.value
    }).then(res => {
        list.value.push(...res.object)
        if (res.object < 10) {
            finished.value = true
            loading.value = false
        } else {
            currentPage.value += 1
            finished.value = false
            loading.value = false
        }
    })
}
const loadMore = () => {
    getteamAgentPosStatistic()
}
const getposTypeCountStatistic = () => {
    posTypeCountStatistic().then(res => {
        posstatistics.value = res.object
    })
}
const getposTypeStatusCountStatistic = () => {
    posTypeStatusCountStatistic({
        type: active.value
    }).then(res => {
        res.object.forEach(item => {
            if (item.type == 'team') {
                teamData.value = item
            } else if (item.type == 'direct') {
                directData.value = item
            } else if (item.type == 'below') {
                belowData.value = item
            }
        })
    })
}
const getposActivateCountStatistic = () => {
    posActivateCountStatistic({
        type: active.value,
        statisticInterval: statisticInterval.value
    }).then(res => {
        const date = res.object.map(item => item.activateDate)
        const data = res.object.map(item => item.activateCount)
        getTrading(date, data)
    })
}
const getteamPosActivateTrendStatistic = () => {
    teamPosActivateTrendStatistic({
        type: active.value,
        startTime: currentTime.value.split('至')[0],
        endTime: currentTime.value.split('至')[1]
    }).then(res => {
        const date = res.object.map(item => item.activateDate)
        const activateCount = res.object.map(item => item.activateCount)
        const belowActivateCount = res.object.map(item => item.belowActivateCount)
        const directActivateCount = res.object.map(item => item.directActivateCount)
        getTrading2(date, activateCount, belowActivateCount, directActivateCount)
    })
}
// 时间戳格式化
const formatTime = time => {
    let date = new Date(time)

    let year = date.getFullYear()

    let month = date.getMonth() + 1

    let day = date.getDate()

    return year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0')
}

const onConfirm = values => {
    const [start, end] = values
    console.log(values, 'values')
    currentTime.value = `${formatTime(start)}至${formatTime(end)}`
    getteamPosActivateTrendStatistic()
    showCalendar.value = false
}
const onTabDay = () => {
    getposActivateCountStatistic()
}
const onClickTab = () => {
    currentPage.value = 1
    list.value = []
    getposTypeStatusCountStatistic()
    getposActivateCountStatistic()
    getteamPosActivateTrendStatistic()
    getteamAgentPosStatistic()
}
getposTypeCountStatistic()
getposTypeStatusCountStatistic()
getposActivateCountStatistic()
// getteamAgentPosStatistic()
</script>

<style scoped lang="scss">
.page-wrapper {
    padding: 10px;
    .selTime {
        width: 12px;
        height: 12px;
    }
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .titleLeft {
            display: flex;
            align-items: center;
        }
        .checkDetail {
            font-size: 14px;
            font-family: '.PingFang SC';
            font-weight: 400;
            color: #212121;
        }
        img {
            width: 22px;
            margin-right: 5px;
            height: 15px;
        }
        .checkMore {
            width: 14px;
            height: 14px;
        }
        text {
            font-size: 16px;
            font-family: SimHei;
            font-weight: 400;
            color: #4d4d4d;
        }
    }
    .card {
        background: linear-gradient(159deg, #66d6ff 0%, #a9d0fe 100%);
        opacity: 1;
        border-radius: 6px;
        padding: 10px;
        margin-top: 10px;
        .top {
            font-size: 12rpx;
            font-family: SimHei;
            line-height: 25px;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            .label {
                font-size: 16rpx;
                font-family: DingTalk JinBuTi;
            }
        }
        .bottom {
            height: 66px;
            background: #e7efff;
            border-radius: 6px;
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
            align-items: center;
            .left {
                width: 33.33333%;
                text-align: center;
                line-height: 20px;
                .label {
                    font-size: 16px;
                    font-family: DingTalk JinBuTi;
                    font-weight: 400;
                    color: #66d6ff;
                }
                .value {
                    font-size: 12px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #66d6ff;
                }
            }
        }
    }
    .card-t {
        background: #ffffff;
        border-radius: 6px;
        margin-top: 10px;
        overflow: hidden;
        .top {
            display: flex;
            .left {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                height: 60px;
                background: #66d6ff;
                width: 26px;
                font-size: 12px;
                font-family: DingTalk JinBuTi;
                font-weight: 400;
                color: #ffffff;
            }
            .right {
                flex: 1;
                display: flex;
                .le {
                    width: 33.333333%;
                    height: 60px;
                    display: flex;
                    flex-direction: column;
                    line-height: 20px;
                    align-items: center;
                    justify-content: center;
                    .label {
                        font-size: 16px;
                        font-family: DingTalk JinBuTi;
                        font-weight: 400;
                        color: #000000;
                    }
                    .value {
                        font-size: 12px;
                        font-family: SimHei;
                        font-weight: 400;
                        color: #707070;
                    }
                }
            }
        }
    }
    .card-z {
        height: 330px;
        margin-top: 10px;
        padding: 10px;
        background: #ffffff;
        opacity: 1;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        #Trading {
            flex: 1;
        }
        #Trading2 {
            flex: 1;
        }
    }
    .card-f {
        font-size: 12px;
        font-weight: 500;
        height: auto;
        color: #989898;
        .center {
            padding: 10px;
        }
        .footer {
            .top {
                display: flex;
                padding: 10px;
                border-bottom: 1px solid #ccc;
                .tt {
                    color: #989898;
                    text-align: center;
                    width: 20%;
                }
            }
            .b {
                .tt {
                    color: black;
                }
            }
        }
    }
}
</style>
